<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="CreateUser"
      :back-button="backButton"
      @nav-bar-back-click="$dsxRouter.back()"
    >
    </hips-nav-bar>

    <hips-input :d-field="dsxRecords.at(0).getField('userName')"></hips-input>
    <hips-input :d-field="dsxRecords.at(0).getField('gender')"></hips-input>
    <hips-input :d-field="dsxRecords.at(0).getField('location')"></hips-input>
    <hips-textarea
      :d-field="dsxRecords.at(0).getField('description')"
    ></hips-textarea>
    <hips-input :d-field="dsxRecords.at(0).getField('birthday')"></hips-input>
    <hips-input :d-field="dsxRecords.at(0).getField('age')"></hips-input>

    <hips-button @click="submit" block type="primary">submit</hips-button>
  </hips-view>
</template>

<script>
import Dsx from '@hips/plugin-dataset-vuex';

import { View, NavBar, Button, Input, Textarea } from '@hips/vue-ui';

export default {
  name: 'create-user',
  data() {
    const _this = this;

    const dsx = new Dsx({
      moduleName: 'create-user',
      autoCreate: true,
      // keepAlive: true,
      // data: [
      //   {
      //     userName: '测试名',
      //     gender: 0,
      //     location: 'location',
      //     description: 'description',
      //     birthday: 'birthday',
      //     age: 12,
      //   },
      // ],
      primaryKey: 'id',
      fields: [
        {
          name: 'userName',
          label: '姓名',
          placeholder: '请输入姓名',
          type: 'text',
          validateOn: 'change',
          required: true,
          emits: {
            focus(e) {
              console.log('focus e = ', e);
            },
          },
          validationMessages: {
            required: '请输入姓名',
          },
        },
        {
          name: 'gender',
          label: '性别',
          placeholder: '请输入性别',
          type: 'number',
          validateOn: 'change',
          defaultValue: 0,
          required: true,
          validator(value) {
            return Number(value) === 0 || Number(value) === 1;
          },
          validationMessages: {
            required: '请输入性别',
            custom: '请输入1或者0，1表示男，0表示女',
          },
        },
        {
          name: 'location',
          label: '地址',
          placeholder: '请输入地址',
          type: 'text',
          validateOn: 'change',
          // required: true,
          dynamicProps: {
            required: ({ record }) => {
              if (record.get('gender') == 0) {
                return true;
              } else {
                return false;
              }
            },
          },
          validationMessages: {
            required: '请输入地址',
          },
        },
        {
          name: 'description',
          label: '自我介绍',
          type: 'text',
          placeholder: '请输入自我介绍',
          required: true,
          dynamicProps: {
            required: ({ record }) => {
              if (record.get('gender') == 0) {
                return true;
              } else {
                return false;
              }
            },
            placeholder: ({ record }) => {
              if (record.get('gender') == 0) {
                return '女性自我介绍';
              } else {
                return '男性自我介绍';
              }
            },
          },
          validateOn: 'change',
          showCount: true,
          maxLength: 120,
          validationMessages: {
            required: '请输入自我介绍',
            maxLength: '请输入小于120个字符的内容',
          },
        },
        {
          name: 'birthday',
          label: '生日',
          type: 'text',
          placeholder: '请输入生日',
          required: true,
          validateOn: 'change',
          validationMessages: {
            required: '请输入生日',
          },
        },
        {
          name: 'age',
          label: '年龄',
          type: 'number',
          placeholder: '请输入年龄',
          required: true,
          validateOn: 'change',
          validator(value) {
            return value > 0 && value < 120;
          },
          emits: {
            change() {
              console.log('change age');
            },
          },
          validationMessages: {
            required: '请输入年龄',
            custom: '年龄超过限制',
          },
        },
      ],
      transport: {
        submit: '/user/submit',
      },
      events: {
        beforeSubmit() {
          _this.$hips.indicator.show({
            text: '加载中',
          });
        },
        submitSuccess() {
          _this.$hips.indicator.hide();
          _this.$hips.toast({ message: '提交成功', duration: 1400 });
          setTimeout(() => {
            _this.$dsxRouter.back();
          }, 1500);
        },
      },
    });

    return {
      dsxRecords: dsx.records,
      backButton: {
        backText: '取消',
      },
    };
  },
  components: {
    [View.name]: View,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Input.name]: Input,
    [Textarea.name]: Textarea,
  },
  methods: {
    submit() {
      this.dsxRecords.submit();
    },
  },
};
</script>

<style scoped></style>
